// pages/draw/draw.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hidden:true,
    x:0,
    y:0,
    imgSrc:'',
    src: "https://7n.w3cschool.cn/attachments/day_160924/201609241558036306.jpg"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setFillStyle('red')
    ctx.fillRect(10,10,100,100)
    ctx.fill()
    ctx.draw()
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.cavas = wx.createCanvasContext('myCanvas')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },

  start:function(e){
    this.setData({
      hidden:false,
      x:e.touches[0].x,
      y:e.touches[0].y
    })
  },
  move:function(e){
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end:function(){
    this.setData({
      hidden: true
    })
  },

  drawLinearGradient:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    const grd = ctx.createLinearGradient(0, 0, 150, 80)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
  },

  drawCircularGradient:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    const grd = ctx.createCircularGradient(75, 50, 40)  //createCircularGradient(x,y,r)
    grd.addColorStop(0,'red')
    grd.addColorStop(0.2,'orange')
    grd.addColorStop(0.4,'yellow')
    grd.addColorStop(0.6,'green')
    grd.addColorStop(0.8,'blue')
    grd.addColorStop(1,'pink')
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
  },

  canvasToTempFilePath:function(){
    var that = this
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      x:10,
      y:10,
      width:150,
      height:150,
      destWidth:150,
      destHeight:150,
      success:function(res){
        that.setData({
          imgSrc:res.tempFilePath
        })
      }
    }, this)
  },

  setStrokeStyle:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setStrokeStyle('red')
    ctx.strokeRect(180,10,150,75)
    ctx.draw()
  },

  setShadow:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setFillStyle('red')
    ctx.setShadow(10, 10, 50, 'green')   
    ctx.fillRect(10,10,150,75)
    ctx.draw()
  },

  setLineWidth:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.setLineCap('buff')
    ctx.moveTo(10,10)
    ctx.lineTo(150,10)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(5)
    ctx.moveTo(10,30)
    ctx.lineTo(150,30)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('square')
    ctx.setLineWidth(10)
    ctx.moveTo(10, 50)
    ctx.lineTo(150, 50)
    ctx.stroke()

    ctx.draw()
  },

  setLineJoin:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.setLineJoin('bevel')
    ctx.setLineWidth(10)
    ctx.moveTo(180,10)
    ctx.lineTo(270,50)
    ctx.lineTo(180,90)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineJoin('round')
    ctx.setLineWidth(10)
    ctx.moveTo(210, 10)
    ctx.lineTo(300, 50)
    ctx.lineTo(210, 90)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineJoin('miter')
    ctx.setLineWidth(10)
    ctx.moveTo(250, 10)
    ctx.lineTo(330, 50)
    ctx.lineTo(250, 90)
    ctx.stroke()


    ctx.draw()
  },

  setMiterLimit:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(1)
    ctx.setLineWidth(10)
    ctx.moveTo(180, 10)
    ctx.lineTo(270, 50)
    ctx.lineTo(180, 90)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(2)
    ctx.setLineWidth(10)
    ctx.moveTo(210, 10)
    ctx.lineTo(300, 50)
    ctx.lineTo(210, 90)
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(3)
    ctx.setLineWidth(10)
    ctx.moveTo(250, 10)
    ctx.lineTo(330, 50)
    ctx.lineTo(250, 90)
    ctx.stroke()


    ctx.draw()
  },

  clearRect:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setFillStyle('red')
    ctx.fillRect(0,0,150,200)
    ctx.setFillStyle('blue')
    ctx.fillRect(150,0,150,200)
    ctx.clearRect(20,20,100,100)
    ctx.draw()
  },

  fill:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.rect(10, 10, 100, 30)
    ctx.setFillStyle('yellow')    
    ctx.fill()

    // begin another path
    ctx.beginPath()
    ctx.rect(10, 40, 100, 30)

    // only fill this rect, not in current path
    ctx.setFillStyle('blue')
    ctx.fillRect(10, 70, 100, 30)

    ctx.rect(10, 100, 100, 30)

    // it will fill current path
    ctx.setFillStyle('red')
    ctx.fill()

    ctx.draw()

    wx.pageScrollTo({
      scrollTop: 0,
    })
  },

  stroke:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.rect(10,10,100,100)
    ctx.setLineWidth(2)
    ctx.setStrokeStyle('purple')
    ctx.stroke()
    ctx.draw()
  },

  triangle:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.setStrokeStyle('pink')
    ctx.setLineWidth(5)
    ctx.moveTo(10,10)
    ctx.lineTo(80,10)
    ctx.lineTo(80,80)
    ctx.closePath()
    ctx.stroke()
    ctx.draw()
  },

  arc:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.arc(50,50,50,0,Math.PI*1.5,false)
    ctx.setStrokeStyle('pink')
    ctx.setLineWidth(5)
    ctx.stroke()
    ctx.draw()
  },

  quadraticCurveTo:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.arc(10,10,2,0,Math.PI*2)
    ctx.setFillStyle('green')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(200, 10, 2, 0, Math.PI * 2)
    ctx.setFillStyle('blue')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(10, 100, 2, 0, Math.PI * 2)
    ctx.setFillStyle('red')
    ctx.fill()

    ctx.beginPath()
    ctx.moveTo(10,10)
    ctx.quadraticCurveTo(10,100,200,10)
    ctx.setStrokeStyle('#333333')
    ctx.setLineWidth(2)
    ctx.stroke()
    ctx.draw()
  },

  bezierCurveTo:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.moveTo(10,10)
    ctx.lineTo(10,90)
    ctx.lineTo(90,10)
    ctx.lineTo(90,90)
    ctx.lineTo(10,10)
    ctx.setStrokeStyle('#ffffff')
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(10,10)
    ctx.bezierCurveTo(10,90,90,90,90,10)
    ctx.setStrokeStyle('#000000')
    ctx.stroke()

    ctx.draw()
  },

  scale:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.strokeRect(10,10,25,25)
    ctx.scale(2,2)
    ctx.strokeRect(10,10,25,25)
    ctx.scale(2,2)
    ctx.strokeRect(10, 10, 25, 25)

    ctx.draw()
  },

  rotate:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.strokeRect(10, 10, 25, 25)
    ctx.rotate(20*Math.PI/180)
    ctx.strokeRect(10, 10, 25, 25)
    ctx.rotate(20 * Math.PI / 180)
    ctx.strokeRect(10, 10, 25, 25)

    ctx.draw()
  },

  translate:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.strokeRect(10, 10, 25, 25)
    ctx.translate(50,0)
    ctx.strokeRect(10, 10, 25, 25)
    ctx.translate(-25, 50)
    ctx.strokeRect(10, 10, 25, 25)

    ctx.draw()
  },

  fontSize:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setFontSize(20)
    ctx.fillText('哈',20,20)
    ctx.setFontSize(40)
    ctx.fillText('哈',60, 60)
    ctx.setFontSize(50)
    ctx.fillText('哈', 110, 110)
    ctx.setFontSize(60)
    ctx.fillText('哈', 170, 170)
    ctx.setFontSize(80)
    ctx.fillText('哈', 250, 250)

    ctx.draw()
  },

  setTextAlign:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setStrokeStyle('red')
    ctx.moveTo(150, 20)
    ctx.lineTo(150, 170)
    ctx.stroke()

    ctx.setFontSize(15)
    ctx.setTextAlign('left')
    ctx.fillText('textAlign=left',150,60)

    ctx.setTextAlign('center')
    ctx.fillText('textAlign=center',150,80)

    ctx.setTextAlign('right')
    ctx.fillText('textAlign=right',150,100)

    ctx.draw()
  },

  setTextBaseline:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setStrokeStyle('red')
    ctx.moveTo(5, 75)
    ctx.lineTo(295, 75)
    ctx.stroke()

    ctx.setFontSize(20)

    ctx.setTextBaseline('top')
    ctx.fillText('top',5,75)

    ctx.setTextBaseline('middle')
    ctx.fillText('middle', 50, 75)

    ctx.setTextBaseline('bottom')
    ctx.fillText('bottom', 120, 75)

    ctx.setTextBaseline('normal')
    ctx.fillText('normal', 200, 75)

    ctx.draw()
  },

  drawImage:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    ctx.drawImage(this.data.src,0,0,150,100)

    ctx.draw()
  },


  setGlobalAlpha:function(){
    
    this.cavas.setFillStyle('red')
    this.cavas.fillRect(10,10,150,100)
    this.cavas.setGlobalAlpha(0.2)
    this.cavas.setFillStyle('blue')
    this.cavas.fillRect(50,50,150,100)
    this.cavas.setFillStyle('yellow')
    this.cavas.fillRect(100,100,150,100)
    this.cavas.save()
    this.cavas.restore()

    this.cavas.draw()
  },

  save:function(){

    const ctx = wx.createCanvasContext('myCanvas')

    // save the default fill style
    ctx.save()
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)

    // restore to the previous saved state
    ctx.restore()
    ctx.fillRect(50, 50, 150, 100)

    ctx.draw()
  },

  restore:function(){
    this.cavas.restore()
  },

  measureText:function(){
    this.cavas.fontSize = 'italic bold 20px cursive'
    const measure = this.cavas.measureText('Hello world')
    console.log('文本宽度:',measure.width)
  },

  arcTo:function(){
    this.cavas.beginPath()
    this.cavas.setGlobalAlpha(1.0)
    this.cavas.arcTo(10,10,50,10,40)
    this.cavas.setLineWidth(2)
    this.cavas.setStrokeStyle('red')
    this.cavas.stroke()
    this.cavas.draw()
  },

  strokeText:function(){
    this.cavas.beginPath()
    this.cavas.setFontSize(24)
    this.cavas.strokeText('哈哈哈哈哈哈',10,10,100)
    this.cavas.stroke()
    this.cavas.draw()
  },

  createPattern:function(){
    const pattern = this.cavas.createPattern('../../img/game_normal.png', 'repeat-x')
    this.cavas.setFillStyle(pattern)
    this.cavas.fillRect(0,0,300,180)
    this.cavas.draw()
  }
})